import {
  getSetting,
  openSetting,
  chooseAddress,
  showModal,
  showToast
} from '../../util/asyncWx.js'
import regeneratorRuntime from '../../lib/runtime/runtime';
// pages/cart/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    address: {},
    checkAll: false,
    carts: [],
    total: 0,
    goodsNum: 0
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onShow() {
    //获取缓存中的地址
    const address = wx.getStorageSync('address');
    //获取缓存中的购物车的数据 
    const carts = wx.getStorageSync('carts') || []
    //设置地址
    this.setData({
      address
    });
    this.setCart(carts);
  },
  /*
    获取收货地址的思路：
    1.给按钮添加点击事件
    2.调用微信内置api 获取地址 wx.chooseAddress
    3.获取用于小程序授予权限的状态 ：scope  wx.getSetting
      3.1当用户点击了获取地址的确定 authSetting中的scope.address为true 可以获取地址信息
      3.2当用户从来没有调用获取地址的api，此时的scope.address为undefined 可以获取地址信息
      3.3当用户点击了取消此时的scope.address为false 
        此时要诱导用户打开授权设置页面(wx.openSetting) 重新给予获取地址权限
        再获取地址
  */

  async getAddress() {
    try {
      //获取权限状态
      const res1 = await getSetting();
      const scope = res1.authSetting["scope.address"]
      if (scope === false) {
        //用户点击了取消，scope为false，要诱导用户重新赋予获取地址权限
        await openSetting()
      }
      //用户点击了确定或者是用户第一次点击获取地址api
      //获取地址信息
      let address = await chooseAddress()
      address.all = address.provinceName + address.cityName + address.countyName + address.detailInfo
      console.log(address)
      wx.setStorageSync('address', address);
    } catch (error) {
      console.log(error)
    }
  },


  //复选框勾选触发事件
  /** 
   * 思路：
   * 1.获取商品id
   * 2.把当前点击的商品的checked取反
   * 3.当选中了的就计算商品总价和总数
   * 4.若有一个未选中，checkAll就为false
   * 5.判断carts是否为空，若为空就直接赋值false
   */
  checkedOne(e) {
    console.log(e)
    //1.获取点击的商品id
    const gid = e.currentTarget.dataset.gid
    //2.深拷贝购物车数据数组
    let carts = JSON.parse(JSON.stringify(this.data.carts))
    carts.forEach(v => {
      //3.点击复选框，修改购物车中复选框的选中状态
      if (v.goods_id === gid) {
        v.checked = !v.checked
      }
    })
    this.setCart(carts)
  },
  //全选按钮
  /**
   * 
   * 思路
   * 1.点击全选按钮，获取data中的checkAll，取反选中状态
   * 2.让上面的复选框的状态和全选框的状态保持一致即可
   * 3重新存回缓存，并把最新值赋给data中carts
   */
  checkAll() {
    //1.取反选中状态，让上面的复选框的状态和全选的全选保持一致即可
    let checkAll = !this.data.checkAll
    //2.深拷贝购物车数据数组
    let carts = JSON.parse(JSON.stringify(this.data.carts))
    carts.forEach(v => {
      //3.点击全选复选框，修改购物车中复选框的选中状态，让上面的复选框的状态和全选的全选保持一致
      v.checked = checkAll
    })
    // 4 把修改后的值 填充回data或者缓存中
    this.setCart(carts)
  },
  //修改商品数量 
  /**
   * 思路：
   * 1.通过事件源e获取自定义属性value和商品id,
   * 2.获取输入的值
   * 3.获取要修改商品的索引
   * 4.判断这个value是属于哪个操作
   * 5.把结果重新存回缓存，并赋给data中的变量
   */
  async changeNum(e) {
    //1.获取要修改数量的商品id
    let {
      value,
      id
    } = e.currentTarget.dataset
    //2.获取输入的值,input的内容是字符串的，做减0操作
    let inputValue = e.detail.value - 0
    //3.深拷贝购物车数据
    let carts = JSON.parse(JSON.stringify(this.data.carts))
    //4.找到要修改的商品的索引
    const index = carts.findIndex(v => v.goods_id === id)
    //判断是什么操作
    if (carts[index].num === 1 && value === -1) {
      //当操作是减法并且数量为1的时候
      //4.1显示弹窗
      const res = await showModal({
        content: '数量小于1了,是否要删除该商品'
      })

      if (res.confirm) {
        //点击确定把carts中该商品的数据删除
        carts.splice(index, 1)
      } else if (res.cancel) {
        //点击取消，让值为1
        carts[index].num = 1
      }
    } else if (value === 1 || value === -1) {
      //加减操作
      carts[index].num += value
    } else {
      //输入操作
      carts[index].num = inputValue
      if (carts[index].num < 1) {
        const res = await showModal({
          content: '数量小于1了,是否要删除该商品'
        })
        if (res.confirm) {
          //点击确定把carts中该商品的数据删除
          carts.splice(index, 1)
          console.log(carts)
        } else if (res.cancel) {
          //点击取消，让值为1
          carts[index].num = 1
        }
        // this.setCart(carts);
      }
    }
    //不管什么操作，最后都要把修改的数据存回缓存和data中
    this.setCart(carts);
  },
  // 设置购物车状态同时 重新计算 底部工具栏的数据 全选 总价格 购买的数量
  setCart(carts) {
    let checkAll = true;
    // 1 总价格 总数量
    let total = 0;
    let goodsNum = 0;
    carts.forEach(v => {
      if (v.checked) {
        total += parseInt(v.num) * parseFloat(v.goods_price);
        goodsNum += parseInt(v.num);
      } else {
        checkAll = false;
      }
    })
    // 判断数组是否为空
    checkAll = carts.length != 0 ? checkAll : false;
    this.setData({
      carts,
      total,
      goodsNum,
      checkAll
    });
    wx.setStorageSync("carts", carts);
  },
  //下拉刷新事件
  onPullDownRefresh() {
    wx.showLoading({
      title: '加载中',
      duration: 1000,
      mask: true
    });
    //获取缓存中的购物车数据和地址数据
    const carts = wx.getStorageSync('carts');
    const address = wx.getStorageSync('address')
    //清空数据
    this.setData({
      carts: [],
      total: 0,
      goodsNum: 0,
      checkAll: false,
      address: {}
    })
    setTimeout(() => {
      wx.stopPullDownRefresh()
      wx.hideLoading();
      //重新发送请求
      this.setCart(carts)
      this.setData({
        address
      })
    }, 1000)
  },
  //点击结算触发
  /**
    思路：
    1.判断是否勾选了商品
    2.判断是否勾选了地址
    3.上面都勾选了，才可进入结算页面
   */
  async handlePay() {
    //判断是否选中了地址
    const {
      address,
      carts
    } = this.data
    if (!address.userName) {
      const res = await showModal({
        content: '（X﹏X）  没有选择收货地址！'
      })
      if (res.confirm) {
        //获取地址
        this.getAddress()
      } else if (res.cancel) {
        await showToast({
          title: '(⊙…⊙)没有收货地址，无法结算哦！'
        })
      }
      return;
    }
    if (carts.length === 0) {
      await showToast({
        title: '╮(￣▽￣)╭  购物车空空如也！'
      })
      return;
    }
    //有收货地址，勾选了商品，过滤已勾选的商品
    const checkedGoods = carts.filter(item => item.checked)
    //判断这个数组是否有数据
    if (checkedGoods.length === 0) return await showToast({
      title: '( °_° )…请选择要结算的商品！'
    })
    //把这些商品存入缓存
    wx.setStorageSync('checkedGoods', checkedGoods);
    //跳转到支付页面
    wx.navigateTo({
      url: '/pages/pay/index'
    });
  }
})